<script setup>
import { ref } from 'vue'
import Login from '../components/account/LoginBox.vue'
import Register from '../components/account/RegisterBox.vue'
import FindPwd from '@/components/account/findPwdBox.vue'

const register = ref(false)
const login = ref(true)
const findPwd = ref(false)
</script>

<template>
  <div class="login-page">
    <div class="login-header">
      <div class="logo">
        <img src="../assets/logo.svg" alt="BuildMind Logo" class="logo-image" />
        <h1 class="logo-text">BuildMind</h1>
      </div>
    </div>
    
    <div class="login-content">
      <Login v-model:register="register" v-model:login="login" v-model:findPwd="findPwd" v-if="login" />
      <Register v-model:register="register" v-model:login="login" v-model:findPwd="findPwd" v-if="register"></Register>
      <FindPwd v-model:register="register" v-model:login="login" v-model:findPwd="findPwd" v-if="findPwd" />
    </div>
    
    <div class="login-footer">
      <p>© {{ new Date().getFullYear() }} BuildMind. 版权所有</p>
    </div>
  </div>
</template>

<style scoped>
.login-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f8fafc;
  background-image: linear-gradient(135deg, #f5f7fa 0%, #e4f1fe 100%);
}

.login-header {
  display: flex;
  justify-content: center;
  padding: 30px 0;
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo-image {
  height: 36px;
  width: auto;
}

.logo-text {
  font-size: 28px;
  font-weight: 700;
  color: #409eff;
  margin: 0;
  background: linear-gradient(90deg, #409eff, #67c23a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 1px;
}

.login-content {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 20px;
}

.login-footer {
  text-align: center;
  padding: 20px;
  color: #909399;
  font-size: 14px;
}

/* 响应式设计 */
@media (max-width: 576px) {
  .login-content {
    padding: 10px;
  }
  
  .logo-text {
    font-size: 24px;
  }
}
</style>